<!doctype html>
<html lang="zh-CN">
  <head>
    <meta
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
      name="viewport"
    >
    <link rel="stylesheet" type="text/css" href="{{ 'theme.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="{{ 'vendor.css' | public_asset_abs_url }}">
    <link rel="stylesheet" type="text/css" href="/static/app.css">

    <script
      type="application/javascript"
      src="https://cn01-cdn.staticsyy.com/uploads/0/theme/default/public_assets/public.js?v=7a3d83187bd768a171925dac8e3a0866"
    ></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
      {% assign global = theme_config.global %}
      {% if global.general_font.font_face %}
      {{ global.general_font.font_face }}
      {% endif %}

      {% if global.title_font.font_face %}
      {{ global.title_font.font_face }}
      {% endif %}


      :root {

          --popup_border_radius: {{ global.popup_border_radius | default:0 }}px;
          --general_layout_width: {{ global.general_layout_width }}px;
          --general_layout_spacing: {{ global.general_layout_spacing }}px;
          --button_border_radius: {{ global.button_border_radius }}px;
          --full_container_padding: {{ global.full_container_padding }}px;
          --page_background_color: {{ global.page_background_color }};
          --title_color: {{ global.title_color }};
          --main_color: {{ global.main_color }};
          --detail_color: {{ global.detail_color }};
          --buying_parice_color: {{ global.buying_parice_color }};
          --original_price_color: {{ global.original_price_color }};
          --discount_tag_bg: {{ global.discount_tag_bg }};
          --discount_tag_color: {{ global.discount_tag_color }};
          --main_button_bg: {{ global.main_button_bg }};
          --main_button_color: {{ global.main_button_color }};
          --secondary_button_bg: {{ global.secondary_button_bg }};
          --secondary_button_color: {{ global.secondary_button_color }};
          --title_font_family: {{ global.title_font.family | default: "Arial" }};
          --general_font_family: {{ global.general_font.family | default: "Arial" }};
          --title_font_size: {{ global.title_font_size }}px;
          --general_font_size: {{ global.general_font_size }}px;
          --product_font_size: {{ global.product_font_size }}px;
          --big_product_font_size: {{ global.big_product_font_size }}px;
          --title_letter_spacing: {{ global.title_letter_spacing }}px;
          --nav_letter_spacing: {{ global.nav_letter_spacing }}px;

          --title_font_style: {{ global.title_font.style | default: "normal" }};
          --title_font_weigth: {{ global.title_font.weigth | default: 400 }};


          --general_font_style: {{ global.general_font.style | default: "normal" }};
          --general_font_weigth: {{ global.general_font.weigth | default: 400 }};

          --general_line_height: 1.5;
          --wap_title_scale: 0.75;
          --title_margin_bottom_scale: 0.75;
      }
    </style>

    <script src="/static/app.js"></script>
  </head>

  <body class="--body-style">
    {% section 'header/default' %}
    {% comment %} {% section 'header/default' %} {% endcomment %}

    <script type="text/javascript">
      document.addEventListener('DOMContentLoaded', (event) => {
          $(".product_view").on("click", quickview);
          $('html,body').find('img[data-src]').each(function () {
              addLazyImages($(this))
          })
          {% if theme_config.global.product_img_list_type != 0 %}
          let productDetail = new omesaasProduct({})
          productDetail.renderProductImgList()
          productDetail = null
          {% endif %}

          var customStickyElements = document.getElementsByTagName('custom-sticky');

          // 遍历自定义元素并添加滚动事件监听器
          window.addEventListener('scroll', function () {
              Array.from(customStickyElements).forEach(function (element) {
                  var rect = element.getBoundingClientRect();
                  if (rect.top <= 0) {
                      console.log(rect);
                      element.style.position = 'sticky';
                      // 设置元素的top属性为0，使其固定在顶部
                      element.style.top = '0';
                      element.style.zIndex = '10000';
                  } else {
                      element.style.position = 'static';
                  }
              });
          });
      })
    </script>

  </body>
</html>
